<template>
	<view class="app-container">
		<z-paging ref="paging" class="page-main flex-1" :fixed="false" refresher-only @query="getData">
			<view class="banner-box">
				<image class="cover-image" :src="detail.image" mode="aspectFill" />
			</view>
			<view class="basic-box">
				<view class="title-box">{{ detail.name }}</view>
				<view class="introduce">{{ detail.content }}</view>
				<view class="cell-item">
					开始时间：{{ parseTime(detail.start_at, "{y}年{m}月{d}日") }}（{{ parseTime(detail.start_at, "周{a}") }}）{{ parseTime(detail.start_at, "{h}:{i}") }}
				</view>
				<view class="cell-item">
					结束时间：{{ parseTime(detail.end_at, "{y}年{m}月{d}日") }}（{{ parseTime(detail.end_at, "周{a}") }}）{{ parseTime(detail.end_at, "{h}:{i}") }}
				</view>
				<view class="cell-item">
					报名人数：{{ detail.applicationCountDup }}/{{ detail.num }}人
				</view>
				<view class="cell-item">
					报名截止：{{ parseTime(detail.application_at, "{y}年{m}月{d}日") }}
				</view>
				<view class="cell-item">
					活动状态：{{ getActivityStatusText(detail.activityStatusDup) }}
				</view>
				<view class="cell-item flex">
					<text>活动地址：</text>
					<text
						class="flex-1">{{ detail.province }}{{ detail.city }}{{ detail.area }}{{ detail.address }}</text>
					<image class="navigation-icon" src="/static/icons/navigation-icon.png" mode="aspectFill"
						@click="handleNavigation(detail.address, detail.lat, detail.lon)" />
				</view>
			</view>
			<view class="organ-info-box">
				<view class="title-box">主办方信息</view>
				<view class="main-box flex">
					<image class="organ-img" :src="detail.organizer_image" mode="aspectFill" />
					<view class="content-box">
						<view class="organ-name">{{ detail.organizer_name }}</view>
						<view class="organ-phone">联系电话：{{ detail.organizer_tel }}</view>
					</view>
				</view>
			</view>
			<view class="slide-list">
				<image v-for="(item, index) in detail.slides" :key="index" :src="item" mode="widthFix"
					class="slide-item" />
			</view>
		</z-paging>
		<view v-if="isLogin && isSigningUp" class="submit-box">
			<button v-if="!isSignUp" type="primary" hover-class="is-hover"
				@click="handleToPage(`/pages/signUp/detail?id=${detail.id}`)">立即报名</button>
			<button v-if="isSignUp" type="default" hover-class="is-hover" @click="handleCancleSignUp">取消报名</button>
			<!-- 底部安全距离 -->
			<uv-safe-bottom></uv-safe-bottom>
		</view>
		<view v-if="!isLogin" class="submit-box">
			<button type="primary" hover-class="is-hover" @click="handleToPage('/pages/user/login')">登录获取更多信息</button>
			<!-- 底部安全距离 -->
			<uv-safe-bottom></uv-safe-bottom>
		</view>
	</view>
</template>

<script setup>
	import {
		getActivity,
		cancleActivitySignUp
	} from "@/api";
	import {
		computed,
		reactive,
		ref,
		toRefs
	} from "vue";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import store from "@/store";

	const state = reactive({
		activityId: "",
		detail: {},
		isLogin: true
	});

	const {
		activityId,
		detail,
		isLogin
	} = toRefs(state);

	const paging = ref(null);

	// 活动报名中
	const isSigningUp = computed(() => {
		return detail.value.activityStatusDup === 1;
	})

	// 活动进行中
	const isUnderway = computed(() => {
		return detail.value.activityStatusDup === 2;
	})

	// 获取已结束
	const isEnd = computed(() => {
		return detail.value.activityStatusDup === 3;
	})

	// 获取是否报名
	const isSignUp = computed(() => {
		return detail.value.is_application === 1;
	})

	// 获取活动详情
	async function getActivityData() {
		const res = await getActivity({
			id: activityId.value
		});
		detail.value = res.data;
	}

	// 获取用户信息
	async function getUserInfo() {
		await store.dispatch("GetUserInfo");
		isLogin.value = store.state.isLogin;
	}

	// 获取活动状态文本
	function getActivityStatusText(status) {
		if (status === 1) {
			return "报名中";
		} else if (status === 2) {
			return "进行中";
		} else if (status === 3) {
			return "已结束";
		}
	}

	// 获取数据
	async function getData() {
		await getActivityData();
		await getUserInfo();
		paging.value.complete();
	}

	// 取消报名
	function handleCancleSignUp() {
		uni.showModal({
			title: "温馨提示",
			content: "是否确认取消报名",
			showCancel: true,
			success: async (result) => {
				if (!result.confirm) return;
				await cancleActivitySignUp({
					id: detail.value.id
				});
				uni.showToast({
					title: "取消成功",
					icon: "none"
				})
				setTimeout(() => {
					paging.value.reload();
				}, 1000)
			}
		})
	}

	onLoad((option) => {
		activityId.value = option.id;
	})

	onShow(() => {
		getData();
	})
</script>

<style scoped lang="scss">
	.app-container {
		.page-main {
			overflow-y: auto;
			display: flex;
			flex-direction: column;
		}

		.banner-box {
			width: 100%;
			height: 500rpx;
			flex-shrink: 0;
			position: relative;
			z-index: -1;
		}

		.basic-box {
			margin: -100rpx 20rpx 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			z-index: 1;
			padding: 30rpx;

			.title-box {
				font-size: 40rpx;
				font-weight: bold;
			}

			.introduce {
				font-size: 24rpx;
				line-height: 40rpx;
				margin-top: 10rpx;
				margin-bottom: 30rpx;
			}

			.cell-item {
				line-height: 40rpx;
				margin-bottom: 20rpx;

				&.flex {
					align-items: flex-start;
				}

				.navigation-icon {
					width: 50rpx;
					height: 50rpx;
					border-radius: 25rpx;
					margin-left: 10rpx;
				}
			}
		}

		.organ-info-box {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			margin: 0 20rpx 40rpx;

			.title-box {
				font-size: 30rpx;
				font-weight: bold;
				position: relative;
				padding-left: 10rpx;

				&::before {
					content: "";
					display: block;
					width: 6rpx;
					height: 24rpx;
					background-color: var(--primary-color);
					border-radius: 6rpx;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					margin: auto 0;
				}
			}

			.main-box {
				column-gap: 20rpx;
				margin-top: 40rpx;

				.organ-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
				}

				.content-box {
					.organ-name {
						font-size: 28rpx;
						font-weight: bold;
					}

					.organ-phone {
						font-size: 24rpx;
						color: var(--gray-font-color);
						margin-top: 10rpx;
					}
				}
			}
		}

		.slide-list {
			.slide-item {
				width: 100%;
				display: block;
			}
		}
	}
</style>